<template>
  <div>
    <Head-Top></Head-Top>
    <div class="all_con">
      <div>
        <el-button @click="exportExcel()" type="primary">导出报表</el-button>
      </div>
      <div class="table_container">
        <table id="out-table">
          <tr>
            <th>手机号</th>
            <th>用户名</th>
            <th>地址</th>
            <th style="width: 240px">提现方式</th>
            <th style="width: 160px">本次提现金额（元）</th>
            <th>备注</th>
            <th>发起时间</th>
            <th>审批</th>
            <th style="width: 60px">删除</th>
          </tr>
          <tr v-for="(item,index) in tableData">
            <td>{{item.phone}}</td>
            <td>{{item.realname}}</td>
            <td>{{item.address}}</td>
            <td>{{item.cardNumber}}</td>
            <td>{{item.money}}</td>
            <td>{{item.excuse}}</td>
            <td>{{item.insert_time}}</td>
            <td>
              <div v-show="item.status==true">
                <el-button
                  size="mini"
                  @click="handleAgree(index,item.cash_id, item)">同意
                </el-button>
                <el-button
                  style="margin-left: 0;margin-top: 10px;"
                  size="mini"
                  type="danger"
                  @click="handleRefuse(index,item.cash_id, item)">拒绝
                </el-button>
              </div>
              <div v-show="item.status==3">
                已拒绝
              </div>
              <div v-show="item.status==2">
                已同意
              </div>
            </td>
            <td><el-button @click="handleDelete(index,item.cash_id)" type="text">删除</el-button></td>
          </tr>
        </table>
        <div>
          <el-dialog
            class="dialog"
            title="提现审批"
            :visible.sync="dialogVisible"
            width="30%"
              >
            <div>用户：{{currInfo.realname}}</div>
            <div>地址：{{currInfo.address}}</div>
            <div>{{currInfo.cardNumber}}</div>
            <div style="color: #e86312; font-size: 16px;line-height: 3">提现金额：{{currInfo.money}}</div>
            <div v-show="!agree">备注：
              <el-input type="textarea"
                        autosize
                        placeholder="输入备注信息" v-model="excuse"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="submitAgree">确 定</el-button>
            </span>
          </el-dialog>
        </div>
        <div class="pageination">
          <span style="float: left" class="demonstration">当前第1页</span>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :current-page.sync="currentPage"
            :page-sizes="[10, 20 ,100, 200, 500,1000]"
            :page-size="limit"
            layout="sizes, prev, pager, next"
            :total="allTableData.length">
          </el-pagination>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
  import HeadTop from '../components/HeadTop'
  import {getCashApply, refuseCash, agreeCash,deleteCashRecord} from "../api/getData";

  export default {
    name: "Cash",
    components: {
      HeadTop,
    },
    data() {
      let validatePhoneName = (rule, value, callback) => {
        callback();
      }
      return {
        ruleForm1: {
          phoneName: '',
        },
        rules1: {
          phoneName: [
            {validator: validatePhoneName, trigger: 'blur'}
          ]
        },
        date_value1: '',
        date_value2: '',
        tableData: [],
        offset: 0,
        limit: 10,
        count: 0,
        currentPage: 1,
        allTableData: [],
        dialogVisible: false,
        excuse: '',
        currInfo: {
          realname: '',
          accountType: '',
          cardNumber: ''
        },
        agree:true
      }
    },
    methods: {
      exportExcel() {
        /* generate workbook object from table */
        let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
        /* get binary string as output */
        let wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
        try {
          FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), '申请提现.xlsx')
        } catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout)
        }
        return wbout
      },
      handleDelete(index,cash_id){ //删除
        deleteCashRecord({cash_id})
          .done(res=>{
            if(res.success==true){
              let {tableData}=this
              tableData.splice(index,1)
              this.tableData=tableData
            }
            this.$message({
              type:'success',
              message:'删除成功！'
            })
          })
      },
      handleSizeChange(val) {  //每页数量变化
        this.currentPage=1
        this.limit=val
        this.tableData = this.$_.chunk(this.allTableData, val)[0]
      },
      handleCurrentChange(val) { //页码变化
        this.tableData = this.$_.chunk(this.allTableData, this.limit)[val - 1]
      },
      handleRefuse(index, cash_id,item) { //拒绝
        this.excuse=''
        this.currInfo=item
        this.agree=false
        this.currInfo.index=index
        this.dialogVisible=true
      },
      handleAgree(index,cash_id,item) { //同意
        this.excuse=''
        this.currInfo=item
        this.agree=true
        this.currInfo.index=index
        this.dialogVisible=true
      },
      submitAgree(){  //提交同意或拒绝
        let {cash_id,index}=this.currInfo
        let {excuse,agree}=this
        if(agree){
          agreeCash({cash_id})
            .done(res => {
              if (res.message == 'success') {
                this.tableData[index].status = 2
                this.dialogVisible=false
                this.$message({
                  type: 'success',
                  message: '您已同意提现申请'
                })
              }
            })
        }
       if(!agree){
         refuseCash({cash_id, excuse})
           .done(res => {
             if (res.message == 'success') {
               this.dialogVisible=false
               this.$message({
                 type: 'success',
                 message: '您的理由是: ' + excuse
               });
               this.tableData[index].status = 3
               this.tableData[index].excuse = excuse
             }
           })
       }
      }
    },
    watch: {
      date_value1: function (val, oldVal) {
        console.log('val++++++++++++++' + val)
      },
      allTableData(val, oldVal) {
        for (let item of val) {
          item.insert_time = this.$moment(item.insert_time).format('YYYY-MM-DD HH:mm:ss');
          if (item.excuse == ''||item.excuse == null) {
            item.excuse = '无'
          }
          if (item.accountType == 1) {
            item.cardNumber = `支付宝：${item.alipayNumber}`
          }
          if (item.accountType == 2) {
            item.cardNumber = `银行卡：${item.cardNumber}`
          }
        }
      }
    },
    mounted() {
      getCashApply()
        .done(res => {
          if (res.message == 'success') {
            this.allTableData = res.result
            this.tableData = this.$_.chunk(res.result, this.limit)[0]
          }
        })
    }
  }
</script>

<style lang="less" scoped>
  @import "../style/table";
  .dialog div{
    line-height: 2;
  }
</style>

